<template>
  <div id="category" :style="'background: url(' + bgImg + ')  no-repeat center'">
    <category-list class="category-list"/>
    <header-inner class="header-inner"/>
    <side-bar-inner class="side-bar-inner"/>
  </div>
</template>

<script>
import CategoryList from "@/components/blog/blogCategory/CategoryList";
import HeaderInner from "@/components/blog/blogs/HeaderInner";
import SideBarInner from "@/components/blog/blogs/SideBarInner";

import bgImg from "@/assets/background/明日方舟-情人节.jpg";

export default {
  name: "Category",
  components: {
    CategoryList,
    HeaderInner,
    SideBarInner
  },
  data() {
    return {
      bgImg
    }
  }
}
</script>

<style scoped>
  #category {
    height: 100%;
  }

  #category .category-list {
    position: absolute;
    top: 10px;
    left: 30%;
  }

  #category .header-inner {
    position: absolute;
    top: 10px;
    right: 71%;
    width: 12%
  }

  #category .side-bar-inner {
    position: absolute;
    top: 220px;
    right: 71%;
    width: 12%;
  }
</style>